<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ICE61850协议转换器</title>
  <script src="./js/vue.js"></script>
  <script src="./js/element.js"></script>
  <link rel="stylesheet"  href="css/element.css">
  <script src="./js/axios.js"></script>
  <link rel="stylesheet" href="css/index.css">


  <style></style>  
</head>
<body>
    <div class="app-wrapper" id="app">
      <!-- 弹框 -->
      <!-- <div class="help" id="help">
        <div class="help-title">
          <div>帮助</div>
          <div @click="close"></div>
        </div>
        <div class="help-box" v-if="openType==1">
          <h3>宽带拨号上网方式</h3>
          <p>使用运营商提供的宽带帐号和密码进行上网的方式。</p>
          <h3>宽带帐号/宽带密码</h3>
          <p>运营商提供的宽带帐号和密码。</p>
        </div>
        <div class="help-box" v-if="openType==2">
          <h3>拨号模式</h3>
          <p>某些特定地区的运营商线路需要特殊处理，建议保持默认的“自动选择拨号模式”。</p>
          <h3>连接模式</h3>
          <p>自动连接：路由器自动进行连接。在使用过程中，如果由于外部原因网络被断开，路由器会每隔10秒尝试重连，直到连接上为止。</p>
          <p>按需连接：路由器在有网络访问请求时将自动进行连接，在检测到持续10分钟都没有网络访问请求时将自动断开连接。</p>
          <p>手动连接：宽带拨号的连接断开都需要手动点击“连接”“断开”按钮进行操作。</p>
          <h3>数据包MTU</h3>
          <p>数据包的最大传输单元，可设置范围为576 ～ 1492。</p>
          <h3>服务名/服务器名</h3>
          <p>如若不是运营商特别要求，请勿填写。</p>
          <h3>WAN口速率</h3>
          <p>设置WAN口的速率以及双工模式。</p>
          <p>个别小区宽带线路被强制为10Mbps导致路由器无法正常使用，此时可以通过将WAN口速率强制为10Mbps解决。</p>
          <h3>WAN口MAC地址</h3>
          <p>设置路由器对广域网的MAC地址，一般情况下不需要更改此地址。 某些地区的运营商会将线路与MAC地址进行绑定，同时提供一个“有效的MAC地址”，此时只有将WAN口的MAC地址设置为该“有效的MAC地址”才可以正常共享上网。</p>
        </div>
        <div class="help-box" v-if="openType==3">
          <h3>无线名称</h3>
          <p>路由器的无线(Wi-Fi)名称。</p>
          <h3>无线密码</h3>
          <p>无线加密使用WPA2-PSK/WPA-PSK加密方式、AES加密算法，无线密码为8至63个字符，最好是数字、字母、符号的组合。</p>
          <h3>无线信道</h3>
          <p>无线数据信号传送的通道，建议保持默认的自动，此时路由器会自动根据周围的无线环境选择一个最好的信道。</p>
          <h3>无线模式</h3>
          <p>路由器工作的无线模式。</p>
          <h3>频段带宽</h3>
          <p>路由器传输无线数据的频段宽度。</p>
        </div>
        <div class="help-box" v-if="openType==4">
          <h3>MAC地址</h3>
          <p>路由器对局域网的MAC地址。</p>
          <h3>LAN口IP参数</h3>
          <p>支持自动获取和手动设置。</p>
          <p>当设置为自动获取时具有LAN-WAN冲突检测机制，主要表现为：当路由器WAN口获取的IP地址与LAN口IP地址在同一网段，路由器LAN口IP地址会自动变更到其他网段。如路由器LAN口默认IP地址为192.168.1.1，此时WAN口获取到的IP地址为192.168.1.X，那么LAN口IP地址会自动变为192.168.0.1。在使用WDS功能时，LAN口参数将从局域网中动态获取，如果获取超时，则IP地址设置为192.168.1.1，子网掩码设置为255.255.255.0。
            当为手动设置时，LAN口参数为页面上的设定值，不会自动修改。</p>
          <h3>IP地址</h3>
          <p>路由器对局域网的IP地址。</p>
          <h3>子网掩码</h3>
          <p>路由器对局域网的子网掩码，一般为255.255.255.0。</p>
          <h3 class="red">注意：</h3>
          <p class="red">1、LAN口IP地址变更之后，虚拟服务器、DMZ主机等原来设置好的与LAN口IP相关的应用将失效。</p>
          <p class="red">2、LAN口IP地址变更之后，仍可以通过域名 “tplogin.cn” 登录路由器管理页面。</p>
          <p class="red">3、为保证连接到路由器的设备能正常上网，建议设备配置为动态获取IP地址。如果设备是固定IP地址，请根据LAN口变更之后的IP地址，对应更改设备的IP地址和网关。</p>
        </div>
        <div class="help-box" v-if="openType==5">
          <h3>DHCP服务器</h3>
          <p>DHCP服务器能够自动给局域网当中的设备分配IP、子网掩码等TCP/IP协议参数。DHCP服务器有三种状态，分别为“开”、“关”和“自动”，“自动”状态为在使用WDS功能时，路由器将检测局域网中是否有别的DHCP服务器存在，若存在则会关闭自身的DHCP服务器。</p>
          <h3>地址池开始/结束地址</h3>
          <p>DHCP服务器自动分配的IP的开始/结束地址。</p>
          <h3>地址租期</h3>
          <p>自动分配的IP的有效时间，超过该时间后局域网内的设备将重新获取IP。</p>
          <h3>网关</h3>
          <p>可选项，建议填入路由器LAN口的IP地址，默认为192.168.1.1。</p>
          <h3>DNS服务器</h3>
          <p>可选项，如果运营商有提供DNS服务器地址，请填于此。</p>
        </div>
        <div class="help-box" v-if="openType==6">
          <h3>升级步骤</h3>
          <p>1.访问TP-LINK官方网站 <a href="www.tp-link.com.cn">www.tp-link.com.cn</a> ，下载对应当前硬件版本的升级软件；</p>
          <p>2.点击“浏览”按钮，选中步骤1中下载的升级文件；</p>
          <p>3.点击“软件升级”按钮进行软件升级；</p>
          <p>4.升级完成后，路由器将自动重启。</p>
        </div>
      </div> -->
      <el-dialog
        title="设置"
        :visible.sync="dialogVisible"
        width="550px">
        <el-form ref="form" :model="modbusData" label-width="120px">
          <el-form-item label="iecAddress">
            <el-input size="mini" disabled v-model="modbusData.iecAddress"></el-input>
          </el-form-item>
          <el-form-item label="serverAddress">
            <el-input size="mini"  v-model="modbusData.serverAddress"></el-input>
          </el-form-item>
          <el-form-item label="digit">
            <el-input size="mini" v-model="modbusData.digit"></el-input>
          </el-form-item>
          <el-form-item label="offset">
            <el-input size="mini" v-model="modbusData.offset"></el-input>
          </el-form-item>
          <el-form-item label="quantity">
            <el-input size="mini" v-model="modbusData.quantity"></el-input>
          </el-form-item>
          <el-form-item label="type">
            <el-select size="mini" style="width: 100%;" v-model="modbusData.type" placeholder="请选择类型">
              <el-option label="COIL_STATUS" value="COIL_STATUS"></el-option>
              <el-option label="INPUT_STATUS" value="INPUT_STATUS"></el-option>
              <el-option label="HOLDING_REGISTER" value="HOLDING_REGISTER"></el-option>
              <el-option label="INPUT_REGISTER" value="INPUT_REGISTER"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="confimSet">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 顶部 -->
      <div class="loginPage" v-if="pageType==0">
        <div class="dandelion dandelion1">
          <span class="smalldan"></span>
          <span class="bigdan"></span>
        </div>
        <div class="dandelion dandelion2">
          <span class="smalldan"></span>
          <span class="bigdan"></span>
        </div>
        <ul class="bg-bubbles">
          <li v-for="i in 10" :key="i"></li>
        </ul>
        <div class="logo">
          <div class="logo-img"><img src="./img/logo.png" style="width: 200px;height: 50px;" alt=""></div>
          <div class="logo-type">ICE61850协议转换器</div>
        </div>
        <div class="login-box">
          <h3>管理系统</h3>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
            <el-form-item label="" prop="userName">
              <el-input v-model="ruleForm.userName" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="passWord">
              <el-input v-model="ruleForm.passWord" placeholder="密码"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
        </div>
      </div>
      <el-container v-if="pageType==1">
        <el-aside width="200px">
          <div class="a-title">
            ICE61850协议转换器
          </div>
          <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          background-color="#000C17"
          text-color="#fff"
          @select="changeNavTab"
          active-text-color="#fff">
          <el-menu-item index="0">
            <i class="el-icon-menu"></i>
            <span slot="title">Modbus连接</span>
          </el-menu-item>
          <el-menu-item index="1" >
            <i class="el-icon-s-platform"></i>
            <span slot="title">IEC61850映射</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-s-help"></i>
            <span slot="title">IEC61850模型</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
        </el-aside>
        <el-container>
          <el-header>
            <div class="t-header">
              <div class="h-left">
                
              </div>
              <div class="h-right">
                <div class="user">
                  <i class="el-icon-s-custom" style="font-size: 18px;color: #02B980;margin-right: 10px;"></i>
                  <span>admin</span>
                </div>
                <div class="out" @click="logout">退出</div>
              </div>
            </div>
          </el-header>
          <el-main style="height: 100%;">
            <div class="" v-if="activeNavTab==0">
              <el-card class="box-card">
                <el-form :model="ModbusForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" style="width: 400px;">
                  <el-form-item label="IP" prop="ipAddress">
                    <el-input v-model="ModbusForm.ipAddress"></el-input>
                  </el-form-item>
                  <el-form-item label="端口" prop="port">
                    <el-input v-model="ModbusForm.port"></el-input>
                  </el-form-item>
                  <el-form-item label="类型" prop="type" >
                    <el-select v-model="ModbusForm.type" placeholder="类型" style="width: 100%;">
                      <el-option label="TCP" value="TCP"></el-option>
                      <el-option label="RTU" value="RTU"></el-option>
                      <el-option label="ASCII" value="ASCII"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="goon" size="medium" @click="saveModbus">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
            <el-card class="tableCard" v-if="activeNavTab==1" >
              <div class="top-btn">
                <el-button type="goon" icon="el-icon-refresh" size="mini" @click="refreshTable">刷新</el-button>
                <el-button   size="mini" icon="el-icon-delete"  @click="clearFilter">清除过滤器</el-button>
              </div>
              <el-table @filter-change="handleFilterMethod"  height="100%" ref="filterTable"  @cell-click="getCell" :cell-class-name="getRowColumn" class="table-box" :data="tableData" border header-row-class-name="tableHeader">
                <el-table-column label="序号" width="50" height="45">
                  <template slot-scope="scope">
                    <div>{{scope.row.index+1}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="数据对象全路径名"  prop="uuid" column-key="uuid"
                :filters="[{ text: 'setVal', value: 0 },{text: 'minVal', value: 1},{text: 'maxVal', value: 2}]"
                :filter-method="filterUuid"
                filter-placement="bottom-end"
                >
                  <template slot-scope="scope">   
                      <span>{{scope.row.uuid}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="实时值" width="300">
                  <template slot-scope="scope">
                    <div class="t-cell" v-if="!scope.row.disable">
                      <div class="edit">
                        <el-input size="mini" style="" v-show="scope.row.index==tabRowIndex&&scope.column.index==tabColumnIndex" @blur="inputBlur"  v-model="scope.row.data.value"></el-input>
                        <span  v-show="!(scope.row.index==tabRowIndex&&scope.column.index==tabColumnIndex)">{{scope.row.data.value}}</span>
                      </div>
                      <i class="s-icon el-icon-success" @click.stop="setValue(scope.row)"></i>
                    </div>
                    <div v-else></div>
                  </template>
                </el-table-column>
                <el-table-column label="Modbus地址" width="200"  prop="offset" column-key="offset"
                :filters="[{ text: '有值', value: 1 }, { text: '无值', value: 0 }]"
                :filter-method="filterModbus"
                filter-placement="bottom-end">
                  <template slot-scope="scope">
                    <div class="t-cell">
                      <div class="edit">
                        <el-input size="mini"   v-show="scope.row.index==tabRowIndex&&scope.column.index==tabColumnIndex" @blur="inputBlur"  v-model="scope.row.offset"></el-input>
                        <!-- <el-input-number controls-position="right" size="mini" :max="60000" :min="0"  v-show="scope.row.index==tabRowIndex&&scope.column.index==tabColumnIndex" @blur="inputBlur"  v-model="scope.row.offset"></el-input-number> -->
                        <!-- <el-input size="mini" type="number" :max="60000" :min="0" style="" v-show="scope.row.index==tabRowIndex&&scope.column.index==tabColumnIndex" @blur="inputBlur"  v-model="scope.row.offset"></el-input> -->
                        <span  v-show="!(scope.row.index==tabRowIndex&&scope.column.index==tabColumnIndex)">{{scope.row.offset}}</span>
                      </div>
                      <i class="s-icon el-icon-success" @click.stop="setModbus(scope.row)"></i>
                      <i class="s-icon el-icon-remove" style="color: #dd1515;" @click.stop="removeModbus(scope.row)"></i>                    
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <div class="eptMngList" v-if="activeNavTab==2" style="height: 100%;padding-right: 0;">
              <div class="m-box scroll-Style">
                <div class="l-box left" id="left">
                    <el-tree id="menu" ref="tree" node-key="uuid" :default-expanded-keys="defaultShowNodes" :data="treeData" :props="defaultProps" :highlight-current="true" :filter-node-method="filterNode"  @node-click="handleNodeClick">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                          
                        </span>
                      </span>
                    </el-tree>
                </div>
                <div id="line" class="resize-line"></div>
                <div class="r-box right" id="right">
                  <div class="top-btn" style="">
                    <el-button type="goon" icon="el-icon-refresh"  size="mini" @click="fresh">刷新</el-button>
                    <el-button type="success" icon="el-icon-finished" size="mini" @click="edit">保存</el-button>
                  </div>
                  <div style="overflow: auto;width: 100%;height: 88%; box-sizing: border-box;">
                    <div class="r-item" v-for="(item,index) in rightData" :key="index">
                      <div class="t-title" @click="settingDialog(item)"><i :style="{color:item.modeBusBean?'#9ebe1d':'#F0F0F0'}" style="margin-right: 5px; cursor: pointer; " class="el-icon-s-tools"></i>{{item.name}}:</div>
                      <div class="box">
                        {{item.values}}
                        <el-checkbox size="mini" :disabled="!item.writeable" v-if="item['data']['valueType']=='BOOLEAN'" v-model="item.data.value"></el-checkbox>
                        <div class="check-group"  v-else-if=" typeof item['data']['value']=='object'">
                          <el-checkbox size="mini" :disabled="!item.writeable" :label="item1"  v-for="(item1,index1) in item.keys" :key="index1" v-model="item['data']['value'][item1]"></el-checkbox>
                        </div>
                        <el-input size="mini" :disabled="!item.writeable" v-else v-model="item['data']['value']" placeholder=""></el-input>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            </div>
            <el-card class="tableCard settingCard" v-if="activeNavTab==3" >
              <div class="s-title">
                <div class="s-t-val">修改密码</div>
              </div>
              <el-form :model="pswForm" :rules="pswRules" ref="pswForm" label-width="80px" class="demo-ruleForm" style="width: 400px;">
                <el-form-item label="原始密码" prop="oldPassword">
                  <el-input v-model="pswForm.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="pswForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input v-model="pswForm.confirmPassword"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="goon" size="medium" @click="saveModbus">保存</el-button>
                </el-form-item>
              </el-form>
              <div class="s-title">
                <div class="s-t-val">LAN口设置</div>
              </div>
              <div class="t-select" style="margin: 15px;">
                <span style="margin-right: 10px;display: inline-block;width: 100px;font-size: 16px;">LAN口选择</span>
                <el-radio-group v-model="lanValue">
                  <el-radio :label="item.value" v-for="(item,index) in LanOptions" :key="index">{{item.label}}</el-radio>
                </el-radio-group>
              </div>
              <el-form :model="lanForm" :rules="pswRules" ref="lanForm" label-width="100px" class="demo-ruleForm" style="width: 400px;">
                <div v-for="(item,index) in lanCulom">
                  <el-form-item :label="item.name" :prop="item.prop">
                    <template>
                      <div v-if="item.options">
                        <el-select v-model="lanForm[item.prop]" placeholder="类型" style="width: 100%;">
                          <el-option  :label="lan" :value="lIndex" v-for="(lan,lIndex) in item.options" :key="lIndex"></el-option>
                        </el-select>
                      </div>
                      <div v-else>
                        <el-input v-model="lanForm[item.prop]"></el-input>                       
                      </div>
                    </template>
                  </el-form-item>
                </div>
                <el-form-item>
                  <el-button type="goon" size="medium" @click="saveModbus">保存</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <script>        
  
    </script>
</body>
<script src="./js/index.js"></script>
</html>